<template>
  <view class="username-container">
    <navbar title="修改昵称"></navbar>
    <view class="body-container">

      <view class="main-input-wrapper">
        <input placeholder="请输入昵称" v-model="name"/>
      </view>
      <view class="tips">请输入1-16个字符，支持中英文、数字</view>
      <view @click="toUpdate" class="custom-btn primary">确认</view>
    </view>
  </view>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
import {commonApi} from '@/api.js'
import navbar from '@/components/navbar'

export default {
  components: {
    navbar
  },
  data() {
    return {
      name: ''
    }
  },

  onLoad() {
    this.name = this.mine.name
  },
  computed: {
    ...mapGetters(['mine'])
  },
  methods: {
    ...mapActions(['refreshUser']),

    toBack() {
      uni.navigateBack()
    },

    async toUpdate() {
      try {
        await commonApi.updateName(this.name)
        await this.refreshUser()
        uni.navigateBack()
      } catch (e) {
        uni.showToast({
          title: e.data.msg,
          icon: 'none',
          duration: 2000
        });
      }
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #fff;
}
.username-container {
  display: flex;
  flex-direction: column;

  .body-container {
    padding: 0 46upx;
    margin-top: 20upx;

    .tips {
      font-size: 24upx;
      margin-top: 28upx;
      color: #9f9f9f;
      margin-bottom: 84upx;
    }
  }
}
</style>
